import React from 'react'
import { connect } from 'dva'
import { DatePicker, Radio } from 'antd'
const { RangePicker } = DatePicker
import moment from 'moment'
const dateFormat = 'YYYY-MM-DD'

const radioArr = [{
  id: 'day1',
  name: '一天内',
}, {
  id: 'day7',
  name: '一周内',
}, {
  id: 'month1',
  name: '一个月内',
}]

/**
 * [TimeSelect 时间段选择]
 */
class TimeSelect extends React.Component {

  state = {
    begindate: this.props.begindate,
    enddate: this.props.enddate,
    timeRange: this.props.timeRange,
    firstdate: this.props.firstdate,
    lastdate: this.props.lastdate,
  }
  componentWillReceiveProps(nextProps) {
    if((nextProps.begindate!=this.props.begindate)||(nextProps.enddate!=this.props.enddate)||(nextProps.timeRange!=this.props.timeRange)||(nextProps.firstdate!=this.props.firstdate)||(nextProps.lastdate!=this.props.lastdate)){
      this.setState({
        begindate: nextProps.begindate,
        enddate: nextProps.enddate,
        timeRange:nextProps.timeRange,
        firstdate: nextProps.firstdate,
        lastdate: nextProps.lastdate,
      })
    }
    
  }
  handleChangeRangePicker = (date, dateString) => {
    //  更新组件state
    this.setState({
      begindate: dateString[0],
      enddate: dateString[1],
      timeRange:'0'
    })
    //  保存查询参数到URL
    this.changeRouter(dateString[0], dateString[1],'0')
  }
  handleChange = (e) => {
    //  计算开始时间和结束时间
    const end = this.props.lastdate;
    let begin
    switch (e.target.value) {
      case 'day1':
        begin = moment(end, dateFormat).subtract(1, 'days').add(1, 'days').format(dateFormat);
        break;
      case 'day7':
        begin = moment(end, dateFormat).subtract(7, 'days').add(1, 'days').format(dateFormat);
        break;
      case 'month1':
        begin = moment(end, dateFormat).subtract(1, 'month').add(1, 'days').format(dateFormat);
        break;
    }

    //  更新组件state
    this.setState({
      time: e.target.value,
      begindate: begin,
      enddate: end,
    })

    //  保存查询参数到URL
    this.changeRouter(begin, end,e.target.value)

  }
  changeRouter(beginVal, endVal,timeRangeVal) {
    //  保存查询参数到URL
    const payload=this.props.location
    payload.query.begindate=beginVal
    payload.query.enddate=endVal
    payload.query.timeRange=timeRangeVal
    this.props.dispatch({
      type: `app/changeRouter`,
      payload
    })
    
  }
  render() {

    const { begindate, enddate, timeRange,firstdate, lastdate } = this.state

    return (
      <div>
        <RangePicker
          allowClear={false}
          value={begindate?[moment(begindate, dateFormat), moment(enddate, dateFormat)]:false}
          disabledDate={current => lastdate?((current < moment(firstdate, dateFormat)) || (current > moment(lastdate, dateFormat))):false}
          format={dateFormat}
          onChange={this.handleChangeRangePicker.bind(this)}
          style={{ width: 240,marginRight:10 }}
        />
        <Radio.Group value={timeRange} onChange={this.handleChange.bind(this)}>
          {
            radioArr.map((item, index) => <Radio.Button value={item.id} key={index}>{item.name}</Radio.Button>)
          }
        </Radio.Group>
      </div>
    )
  }
}
TimeSelect.defaultProps = {
  firstdate:null, 
  lastdate:null,
  begindate: null,
  enddate: null,
  timeRange:'day1',
  location:{
    pathname:'/tradeReplay/dailyReplay',
    query:{},
  }
}
export default connect()(TimeSelect)
